<template>
  <el-form :inline="true" :model="searchPageData" class="demo-form-inline">
    <el-form-item label="终端名称">
      <el-input v-model="searchPageData.gunName"/>
    </el-form-item>
    <el-form-item label="终端编号">
      <el-input v-model="searchPageData.gunNo"/>
    </el-form-item>
    <el-form-item label="状态">
      <el-select
          v-model="searchPageData.status"
          placeholder="请选择状态"
          style="width: 180px"
      >
        <el-option
            v-for="item in deviceStatusList"
            :key="item.status"
            :label="item.statusName"
            :value="item.status"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getDeviceList">查询</el-button>
      <el-button type="primary" @click="deviceReset">重置</el-button>
    </el-form-item>
  </el-form>

  <div class="add-div">
    <el-button type="primary" plain @click="addShow()">新增</el-button>
  </div>
  <!-- table -->
  <el-table :data="gunList" style="width: 90%">
    <el-table-column prop="gunName" label="终端名称" width="100"/>
    <el-table-column prop="gunNo" label="终端编号" width="100"/>
    <el-table-column prop="stationName" label="站点名称" width="140"/>
    <el-table-column prop="gunType" label="终端类型" width="180" :formatter="getGunType"/>
    <el-table-column prop="gunPower" label="终端功率" width="100"/>
    <el-table-column prop="status" label="状态" width="100">
      <template #default="{ row }">
      <span :class="getStatusClass(row.status)">
        {{ getStatusText(row.status) }}
      </span>
      </template>
    </el-table-column>
    <el-table-column prop="createTimeStr" label="创建时间" width="180"/>
    <el-table-column fixed="right" label="操作" width="320">
      <template #default="{ row }">
        <el-button link type="primary" size="small" @click="edit(row)">变更</el-button>
        <el-button link type="primary" size="small" @click="online(row)">上线</el-button>
        <el-button link :disabled="isStatusButtonDisabled(row)" type="primary" size="small"
                   @click="generateRepairOrder(row)">生成维修单
        </el-button>
        <el-button link :disabled="isBindButtonDisabled(row)" type="primary" size="small" @click="bindStation(row)">
          绑定站点
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- dialog -->
  <el-dialog width="40%" :modal="gunInfo.value" v-model="dialogAddVisible">
    <el-form ref="formRef" label-width="100px">
      <el-form-item label="终端名称">
        <el-input v-model="gunInfo.gunName"></el-input>
      </el-form-item>
      <el-form-item label="终端编号">
        <el-input v-model="gunInfo.gunNo"></el-input>
      </el-form-item>
      <el-form-item label="终端功率">
        <el-input v-model="gunInfo.gunPower"></el-input>
      </el-form-item>
      <el-form-item label="是否专用">
        <el-select
            v-model="gunInfo.gunType"
            placeholder="请选择专用类型"
            style="width: 180px"
        >
          <el-option
              v-for="item in gunTypes"
              :key="item.gunType"
              :label="item.gunTypeName"
              :value="item.gunType"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button type="primary" @click="closeAdd()">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog width="38%" :modal="gunInfo.value" v-model="dialogStationVisible">
    <el-form :inline="true" :model="searchStationPageData" class="demo-form-inline">
      <el-form-item label="站点名称">
        <el-input v-model="searchStationPageData.stationName"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
            v-model="searchStationPageData.status"
            placeholder="请选择状态"
            style="width: 180px"
        >
          <el-option
              v-for="item in stationStatusList"
              :key="item.status"
              :label="item.statusName"
              :value="item.status"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getStationList">查询</el-button>
        <el-button type="primary" @click="stationReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- table -->
    <el-table :data="stationList" style="width: 90%">
      <el-table-column prop="userName" label="投资人" width="100"/>
      <el-table-column prop="stationName" label="站点名称" width="140"/>
      <el-table-column prop="address" label="详细地址" width="180"/>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
      <span :class="getStatusClass(row.status)">
        {{ getStationStatusText(row.status) }}
      </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="80">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="bind(row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import {ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {GunList, StationList, GunAdd, GunEdit, GunBind, GunOnline} from '@/api/station/station.js'

const dialogAddVisible = ref(false);
const dialogStationVisible = ref(false);

const searchPageData = ref({
  gunName: '',
  gunNo: '',
  status: '',
  pageSize: 20,
  currentPage: 1,
})

const searchStationPageData = ref({
  stationName: '',
  status: '',
  pageSize: 10,
  currentPage: 1
})

const deviceStatusList = [
  {status: '0', statusName: '待上架'},
  {status: '1', statusName: '充电中'},
  {status: '2', statusName: '空闲'},
  {status: '3', statusName: '离线'},
  {status: '4', statusName: '检修中'},
]

const stationStatusList = ref([
  {
    status: 0,
    statusName: '建设中'
  },
  {
    status: 1,
    statusName: '运营中'
  },
  {
    status: 2,
    statusName: '停运'
  },
  {
    status: 3,
    statusName: '维修中'
  }
]);

const gunTypes = ref([
  {
    gunType: 0,
    gunTypeName: '快充'
  },
  {
    gunType: 1,
    gunTypeName: '慢充'
  }
]);


function getDedicatedType(row, column, cellValue) {
  switch (cellValue) {
    case 0:
      return '否'
    case 1:
      return '是'
    default:
      return ''
  }
}

const gunList = ref([]);
const stationList = ref([]);

const gunInfo = ref({
  id: '',
  stationName: '',
  stationId: '',
  gunNo: '',
  gunName: '',
  address: '',
  gunType: '',
  status: '',
})

//初始化table数据
getDeviceList();

function getDeviceList() {
  console.info('获取设备列表')
  GunList(searchPageData.value).then(res => {
    console.info(res.data)
    if (res.data.code === 200000) {
      gunList.value = res.data.data.data;
    } else {
      console.info(res.data.msg);
    }
  })
}

function getStationList() {
  StationList(searchStationPageData.value).then(res => {
    console.info(res.data)
    if (res.data.code === 200000) {
      stationList.value = res.data.data.data;
    } else {
      console.info(res.data.msg);
    }
  })
}

function stationReset() {
  searchStationPageData.value.stationName = '';
  searchStationPageData.value.status = '';
}

function deviceReset() {
  searchPageData.value.gunNo = '';
  searchPageData.value.gunName = '';
  searchPageData.value.status = '';
}

function edit(row) {
  dialogAddVisible.value = true;
  gunInfo.value = row;
}

function addShow() {
  dialogAddVisible.value = true;
}

function closeAdd() {
  dialogAddVisible.value = false;
  //清空表单数据
  Object.keys(gunInfo.value).forEach(key => {
    gunInfo.value[key] = '';
  });
}

function closeStation() {
  dialogStationVisible.value = false;
  //清空表单数据
  Object.keys(gunInfo.value).forEach(key => {
    gunInfo.value[key] = '';
  });
}

const onSubmit = () => {
  if (gunInfo.value.id === '') {
    GunAdd(gunInfo.value)
        .then(res => {
          if (res.data.code === 200000) {
            closeAdd();
            getDeviceList()
          } else {
            //错误提示框
            ElMessage({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }).catch(() => {
      //错误提示框
      ElMessage({
        message: '请求失败，请稍后再试',
        type: 'warning'
      });
    });
  } else {
    GunEdit(gunInfo.value)
        .then(res => {
          if (res.data.code === 200000) {
            closeAdd();
            getDeviceList()
          } else {
            //错误提示框
            ElMessage({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }).catch(() => {
      //错误提示框
      ElMessage({
        message: '请求失败，请稍后再试',
        type: 'warning'
      });
    });
  }

}

function generateRepairOrder(row) {
  ElMessageBox.confirm('确定要生成维修单吗？')
      .then(() => {
        console.info('生成维修单')
      })
      .catch(() => {
        console.info('取消生成维修单');
      });
}

function bindStation(row) {
  getStationList();
  gunInfo.value = row;
  dialogStationVisible.value = true;
}

function isBindButtonDisabled(row) {
  if (row.stationId === null) {
    console.info('没有绑定站点');
    return false;
  }
  return !(row.stationName === null || row.stationName === undefined || row.stationName === '');
}

function isStatusButtonDisabled(row) {
  return row.status !== 3 && (row.status === 4 || row.status === 2 || row.status === 1 || row.status === 0);
}

function online(row) {
  ElMessageBox.confirm('确定要上线吗？')
      .then(() => {
        GunOnline({id: row.id, status: 2})
            .then(res => {
              if (res.data.code === 200000) {
                getDeviceList()
              } else {
                //错误提示框
                ElMessage({message: res.data.msg, type: 'warning'});
              }
            }).catch(() => {
          //错误提示框
          ElMessage({message: '请求失败，请稍后再试', type: 'warning'});
        });
      })
      .catch(() => {
        console.info('取消上线');
      });
}

function bind(row) {
  gunInfo.value.stationName = row.stationName;
  gunInfo.value.stationId = row.id;
  GunBind(gunInfo.value)
      .then(res => {
        if (res.data.code === 200000) {
          closeStation();
          getDeviceList()
        } else {
          //错误提示框
          ElMessage({
            message: res.data.msg,
            type: 'warning'
          });
        }
      }).catch(() => {
    //错误提示框
    ElMessage({
      message: '请求失败，请稍后再试',
      type: 'warning'
    });
  });
}

function getGunType(row, column, cellValue) {
  switch (cellValue) {
    case 0:
      return '快充'
    case 1:
      return '慢充'
    default:
      return ''
  }
}

function getFlagDesc(row, column, cellValue) {
  switch (cellValue) {
    case 0:
      return '无'
    case 1:
      return '有'
    default:
      return ''
  }
}

function getStatusClass(status) {
  switch (status) {
    case 0:
      return 'text-forestgreen'
    case 1:
      return 'text-green'
    case 2:
      return 'text-red'
    case 3:
      return 'text-black'
    default:
      return ''
  }
}

function getStationStatusText(status) {
  switch (status) {
    case 0:
      return '建设中'
    case 1:
      return '运营中'
    case 2:
      return '停运'
    case 3:
      return '维修中'
    default:
      return ''
  }
}

function getStatusText(status) {
  switch (status) {
    case 0:
      return '待上架'
    case 1:
      return '充电中'
    case 2:
      return '空闲'
    case 3:
      return '离线'
    case 4:
      return '检修中'
    default:
      return ''
  }
}
</script>
<style>
.text-forestgreen {
  color: forestgreen;
}

.text-green {
  color: blue;
}

.text-red {
  color: red;
}

.text-black {
  color: black;
}

</style>